import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import Timeline, { type TimelineDto } from '@/components/time-line/Index'
import { Button } from 'ant-design-vue'
import type { ReportCaseResultDto } from '@/api/insurance/period/types'

@Component
export class CaseProgress extends Render {

    @Prop() progressData!: ReportCaseResultDto[]

    get timelineData() {
        return this.progressData.map(item => {
            return {
                title: item.createTime,
                content: <div class="p-16px">{item.remark}</div>
            }
        }) as TimelineDto[]
    }

    render() {
        return <div class="px-16px pb-16px">
            <div class="text-lg font-bold text-black-200 mb-16px">案件进展</div>

            <Timeline timelineData={this.timelineData}>

            </Timeline>
        </div>
    }
}

export default toNative<{ progressData: ReportCaseResultDto[]}, {}>(CaseProgress)